import React, { useState, useEffect } from 'react'
import './Comments.css'
import { NavBar, SearchBar, Toast, Space, Button } from 'antd-mobile'
import { useNavigate, useLocation } from 'react-router-dom'

export default function Comments() {
  const navigate = useNavigate()
  const location = useLocation()
  console.log(location.state.data);
  const [thisdata, setThisdata] = useState(location.state.data)
  const back = () => {
    navigate(-1)
  }
  const num = (type) => {
    let newdata = thisdata.pl
    if (type == '0') {
      return newdata
    } else if (type == '1') {
      return newdata.filter(item => item.plimgs.length > 0)
    } else if (type == '2') {
      return newdata.filter(item => item.plimgs.length == 0)
    }

  }
  const [show, setShow] = useState(0)
  return (
    <div className='comments'>
      <div className='comments-div'>
      <div className='comments-top'>
        <NavBar onBack={back} ><b>评论</b></NavBar>
        <div className='comments-search'>
          <div className={show == 0 ? 'comments-search-item_active' : 'comments-search-item'} onClick={() => { setShow(0) }}>全部（{num(0).length}）</div>
          <div className={show == 1 ? 'comments-search-item_active' : 'comments-search-item'} onClick={() => { setShow(1) }}>图/视频（{num(1).length}）</div>
          <div className={show == 2 ? 'comments-search-item_active' : 'comments-search-item'} onClick={() => { setShow(2) }}>追加（{num(2).length}）</div>
        </div>
      </div>
      <div className='comments-hr'></div>
      </div>
      
      <div className='comments-content'>
        {num(show).map((item, index) => {
          return (
            <div className='comments-content-item' key={index}>
              <div className='store_pl_content_top'>
                <div className='store_pl_content_top_left'>
                <img src={item.plimg}></img>
                <span key={index}>
                  {item.plname}
                </span>
                 </div> 
                <p>{item.pltime}</p>
              </div>
              <div className='store_pl_content_text'>
                <div className='store_pl_content_text_top'>已购：{thisdata.name} {thisdata.type}</div>
                <p>{item.plcontent}</p>
                <div className='store_pl_content_text_imgs'>
                  {
                    item.plimgs.map((item, index) => {
                      return(
                        <img src={item} key={index}></img>
                      )
                    })
                  }
                </div>
                <div className='store_pl_content_text_bottom'>
                  <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A4%BE%E5%8C%BA/u476.svg'></img>
                    {item.hf.length}
                  <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A4%BE%E5%8C%BA/u479.svg'></img>
                    {item.thumbs}
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
